import React from 'react'
import { ROOTURL, UPLOAD_URL } from './AppConfig'
import { getTimeDistance } from './util'
export default class TalentCreate extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            talentDetail: {}
        }
        let talentId = props.match.params.id
        this.fetchTalent(talentId)
    }
    fetchTalent(talentId){
        let data = {
            goodsid: talentId,
            type: 101,
        }
        let postConfig = {
            method : 'post',
            body: JSON.stringify(data)
        }
        
        fetch(ROOTURL + 'goodsdetail.php', postConfig).then(
            response => response.json()
        ).then(json => {
            this.setState({
                talentDetail: json.result
            })
        }).catch(
            error => { alert('网络错误无法加载物品: ' + error.toString()) }
        )   
    }
    render() {
        const authorInfo = this.state.talentDetail.authorInfo
        if (authorInfo == undefined) {
            return (<div className="spinner-border elementCenter" role="status"></div>)
        }
        let price = this.state.talentDetail.price;
        if (price > 0) {
            price = `￥${price}/起`
        }
        else {
            price = '价格待议'
        }
        return (<div>
            <div className="talentDetailComment">
            <div className="input-group">
                    <input type="text" className="form-control"
                        placeholder="告诉大家你对TA的评价吧~" />
                <div className="input-group-append">
                    <button className="btn btn-primary">
                        提交
                    </button>
                </div>
                </div>
            </div>
            <div style={{ textAlign: "center"}}>
                {this.state.talentDetail.title}
            </div>
            <div className="talentDetailPadding">
            <div className="talentDetailHeader">
                <img src={authorInfo.headimg} className="talentAuthorImage" />
                <div>
                    <div>{authorInfo.nickname}</div>
                    <div className="talentDetailReleaseTime">
                        {getTimeDistance(this.state.talentDetail.createdate)}</div>
                </div>
                <div className="talentDetailPrice">
                        {price}
                </div>
                </div>
                <div>{this.state.talentDetail.text}</div>
                <div>
                    <img
                        src={UPLOAD_URL + this.state.talentDetail.pics[0] + ".jpg"}
                        className="talentDetailImage"
                    />
                </div>
                <div className="talentDetailFooter">
                    <div>浏览 {this.state.talentDetail.viewcount}</div>
                    <div>操作</div>
                </div>
                <div style={{height: "40px"}}></div>
            </div>
        </div>)
    }
}
